<template>
    <div class="demo" v-if="flag">
        <h2>
            Demo - Demo 
        </h2>
        <button id="one"   v-on:click="counter++"  > {{ counter }}</button>
        <div @click="changeText">
            {{ text }}
        </div>
        <p>
            {{ word }}
        </p>
        <p> 
            <input type="text" v-bind:value="word"  @input="changeWord" >
        </p>
        <img :src="link" alt="" class="img" @click="changeSrc">
    </div>
    <button @click="flag=!flag"  >切换flag {{ flag?'显示':'隐藏' }}</button>
    <div>
        <h2 v-for="(item,index) in arr" :key="index"  @click="console.log(item+index)">
            {{ item }} - {{ index+1 }}
        </h2>
    </div>
    <div>
        <h2>计算价格</h2>
        <p>
         数量:   <input type="text" v-model="count">
        </p>
        <p>
         单价:   <input type="text" v-model="price">
        </p>
        <p>
            小计: {{ (count * price) .toFixed(2) }}
        </p>
    </div>
</template>

<script setup>
import { onMounted , ref  } from "vue";

const counter = ref(200)
const text = ref("Are YOu OK?")
const word = ref('Hello,World ')   // ref 响应式 
const flag = ref(true)  
const link = ref('https://img1.baidu.com/it/u=3809141154,678022494&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706720400&t=206fc1aef98cd6bfb0ef434735ccd582')
const arr = ref(["Vue2","Vue3","Node","React","小程序"])

const total = ref(0)
const count = ref(10)
const price = ref(9.9)



const changeText = ()=>{
    text.value = "WH2309"
}

const changeWord = (e)=>{
    console.log(e)
    word.value = e.target.value;
}

const changeSrc = ()=>{
    link.value = "https://img0.baidu.com/it/u=110176915,621401482&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706720400&t=b810bff450853c2cd56493de9e39c7ac"
}

</script>


<style lang="scss"  scoped>
h2{
    color:seagreen;
    font-weight: 800;
    font-size: 30px;
}
.img{
    width:300px;
    height:300px;
}
.demo{
    background: #f4f4f4;
}
</style>